<template>
  <div>
    <template v-for="item in contentRouter" :key="item.to">
      <NuxtLink :to="item.to">
        <button>{{ item.name }}</button>
      </NuxtLink>
    </template>
    <NuxtPage></NuxtPage>
  </div>
</template>

<script setup>
  import { ref } from "vue";

  const contentRouter = ref([
    {
      to: "/",
      name: "Home",
    },
    {
      to: "/01_config-nuxt",
      name: "nuxt配置",
    },
    {
      to: "/02_cpns-nuxt",
      name: "nuxt组件",
    },
    {
      to: "/03_style-nuxt",
      name: "nuxt样式",
    },
    {
      to: "/04_page-nuxt",
      name: "nuxt页面",
    },
    {
      to: "/05_router-nuxt",
      name: "nuxt路由",
    },
    {
      to: "/06_middleware-nuxt",
      name: "nuxt中间件",
    },
    {
      to: "/07_layout-nuxt",
      name: "nuxt布局",
    },
    {
      to: "/08_plugin-nuxt",
      name: "nuxt插件",
    },
    {
      to: "/09_lifecycle-nuxt",
      name: "nuxt生命周期",
    },
    {
      to: "/10_service-nuxt",
      name: "nuxt服务",
    },
    {
      to: "/11_state-pinia",
      name: "nuxt状态管理",
    },
    {
      to: "/12_element-plus",
      name: "nuxt组件库",
    },
  ]);

  const nuxtApp = useNuxtApp();
  // Server & Client
  nuxtApp.hook("app:created", (vueApp) => {
    // console.log("app:created");
  });
  // Client
  nuxtApp.hook("app:beforeMount", (vueApp) => {
    // console.log("app:beforeMount");
  });

  // Server & Client
  nuxtApp.hook("vue:setup", () => {
    // console.log("vue:setup");
  });

  // Server
  nuxtApp.hook("app:rendered", (renderContext) => {
    // console.log("app:rendered");
  });

  // Client
  nuxtApp.hook("app:mounted", (vueApp) => {
    // console.log("app:mounted");
  });
</script>

<style lang="less" scoped>
  button {
    margin: 10px;
  }
</style>
